<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="|${#request.getContextPath()}/back/|"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="resources/css/reset.css" type="text/css"
          media="screen" />
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="resources/css/style.css" type="text/css"
          media="screen" />
    <link rel="stylesheet" href="resources/css/invalid.css" type="text/css"
          media="screen" />

    <!--                       Javascripts                       -->
    <!-- jQuery -->
    <script type="text/javascript"
            src="resources/scripts/jquery-1.8.3.min.js"></script>
    <!-- jQuery Configuration -->
<!--    <script type="text/javascript"-->
<!--            src="resources/scripts/simpla.jquery.configuration.js"></script>-->

    <!-- 弹出框插件的依赖 -->
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script type="text/javascript"
            src="resources/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>

    <!-- 引入webuploader上传控件 -->
    <link rel="stylesheet" href="resources/widget/webuploader/webuploader.css">
    <script type="text/javascript"
            src="resources/widget/webuploader/webuploader.min.js"></script>

    <!-- 引入日期控件 -->
    <script type="text/javascript"
            src="/back/resources/widget/My97DatePicker/WdatePicker.js"></script>



    <script type="text/javascript" src="resources/release/wangEditor.min.js"></script>
    <style type="text/css">
        /*tr{*/

        /*}*/
        /*.suject{*/
        /*    width: 50px;*/
        /*    white-space: nowrap;*/
        /*    overflow: hidden;*/
        /*    word-break: break-all;*/
        /*    text-overflow: ellipsis;*/
        /*}*/
    </style>
    <script>
        /**
         * wangEidtor富文本
         */
        $(function () {
            var E = window.wangEditor
            var editor = new E('#editor')
            editor.customConfig.uploadImgServer = 'goodsManager/uploader'  // 上传图片到服务器
            editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024;
            editor.customConfig.uploadImgMaxLength = 30;
            //自定义文件名
            editor.customConfig.uploadFileName = 'file'
            editor.customConfig.uploadImgHooks = {
                customInsert: function (insertImg, result, editor) {
                    // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                    // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                    // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                    var url =result.filename;
                    insertImg(url);
                    console.log("插入图片 url = " + url );
                    // result 必须是一个 JSON 格式字符串！！！否则报错
                }
            }
            var $text1 = $('#text1')
            editor.customConfig.onchange = function (html) {
                // 监控变化，同步更新到 textarea
                $text1.val(html)
            }
            //创建编辑器
            editor.create();
            $text1.val(editor.txt.html())
        })



        /**
         * 页面加载后初始话
         */
        $(function(){
            // 初始化Web Uploader
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: 'resources/widget/webuploader/Uploader.swf',
                // 文件接收服务端。
                server: 'goodsManager/uploader',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker1'
            });

            //绑定一个上传成功的回调事件
            uploader.on('uploadSuccess', function(file, response){
                //通过文件名称，进行图片的回显示
                var filename = response.filename;
                //设置image显示的图片
                $("#img_fengmian").attr("src",filename);
                //設置封面的路徑到隱藏域
                $("#hidden_fengmian").val(filename);
            });
        });

        $(function(){
            // 初始化Web Uploader
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: 'resources/widget/webuploader/Uploader.swf',
                // 文件接收服务端。
                server: 'goodsManager/uploader',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker2'
            });
            //绑定一个上传成功的回调事件
            uploader.on('uploadSuccess', function(file, response){
                //通过文件名称，进行图片的回显示
                var filename = response.filename;
                //设置image显示的图片
                var html = "<img style='width: 100px; height: 90px; margin: 5px' src='" + filename + "'>";
                html += "<input type='hidden' name='otherImg' value='"+filename+"'/>"
                $("#img_other").append(html);
            });
        });
        
        
        
        /**
         * 弹出添加商品的弹出框
         */
        function dialog_addgoods(){
            //弹出隐藏的弹出框
            $("#goodsadd_div").dialog({
                title: "添加商品",
                width: 800,
                height: 700,
                modal: true
            });
        }
    </script>

</head>
<body>
<div id="main-content">
    <div class="content-box">
        <!-- End .content-box-header -->
        <div class="content-box-content">
            <div class="tab-content default-tab" id="tab1">
                <table>
                    <thead>
                    <tr>
                        <th><input class="check-all" type="checkbox" /></th>
                        <th>编号</th>
                        <th style= "text-align: center">商品名称</th>
                        <th>图片(封面)</th>
                        <th>商品价格</th>
                        <th>库存</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr th:each="goods : ${goodsList}">
                        <td><input type="checkbox" /></td>
                        <td  th:text="${goods.id}">Lorem ipsum dolor</td>
                        <td  class="suject" style="width: 300px" th:text="${goods.subject}">Lorem ipsum dolor</td>
                        <td  th:each="image : ${goods.goodsImages}" th:if="${image.isfengmian == 1}">
                            <img style="width: 100px; height: 90px" th:src="${image.url}">
                        </td>
                        <td th:text="${#numbers.formatCurrency(goods.price.doubleValue())}">价格</td>
                        <td th:text="${goods.save}">库存</td>
                        <td th:text="${#dates.format(goods.createTime, 'yyyy-MM-dd HH:mm:ss')}">库存</td>
                        <td>
                            <!-- Icons --> <a href="#" title="Edit"><img
                                src="resources/images/icons/pencil.png" alt="Edit" /></a> <a
                                href="#" title="Delete"><img
                                src="resources/images/icons/cross.png" alt="Delete" /></a> <a
                                href="#" title="Edit Meta"><img
                                src="resources/images/icons/hammer_screwdriver.png"
                                alt="Edit Meta" /></a>
                        </td>
                    </tr>
                    </tbody>

                    <tfoot>
                    <tr>
                        <td colspan="6">
                            <div class="bulk-actions align-left">
                                <a class="mybutton" onclick="dialog_addgoods();" >添加商品</a>
                            </div>
                            <div class="pagination">
                                <a href="#" title="First Page">&laquo; First</a><a href="#"
                                                                                   title="Previous Page">&laquo; Previous</a> <a href="#"
                                                                                                                                 class="number" title="1">1</a> <a href="#" class="number"
                                                                                                                                                                   title="2">2</a> <a href="#" class="number current" title="3">3</a>
                                <a href="#" class="number" title="4">4</a> <a href="#"
                                                                              title="Next Page">Next &raquo;</a><a href="#"
                                                                                                                   title="Last Page">Last &raquo;</a>
                            </div> <!-- End .pagination -->
                            <div class="clear"></div>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <!-- End .content-box-content -->
    </div>
</div>
<!-- End #main-content -->
<style>
    .seckillClass{
        display: none;
    }
</style>
<script>
    function select_type(type) {
        if (type ==1){
            $(".seckillClass").css("display","none");
        }else {
            $(".seckillClass").css("display","block");
        }
    }
</script>
<!-- 弹出框的内容，默认隐藏的 -->
<div id="goodsadd_div" style="display: none;">
    <div class="content-box">
        <div class="content-box-content">
            <div class="tab-content default-tab" id="tab2">
                <form action="goodsManager/insert" method="post">
                    <fieldset>
                        <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
                        <p>
                            <label>商品类型</label>
                            <input name="type" type="radio" value="1" onclick="select_type(1);" checked>普通商品
                            <input name="type" type="radio" value="2" onclick="select_type(2);">秒杀商品

                        </p>

                        <p>
                            <label>商品标题</label> <input
                                class="text-input medium-input" type="text" id="subject"
                                name="subject" />
                        </p>
                        <p class="seckillClass">
                            <label style="color: red">*秒杀开始时间</label>
                            <input class="text-input medium-input" type="text" name="startTime" onclick="WdatePicker({startDate:'%y-%M-%d {%H+1}:00:00', dateFmt:'yyyy-MM-dd HH:mm:ss', minDate:'%y-%M-%d %H-%m-%s}'})">
                        </p>
                        <p class="seckillClass">
                            <label style="color: red">*秒杀结束时间</label>
                            <input class="text-input medium-input" type="text" name="endTime" onclick="WdatePicker({startDate:'%y-%M-%d {%H+1}:00:00', dateFmt:'yyyy-MM-dd HH:mm:ss', minDate:'%y-%M-%d %H-%m-%s}'})">
                        </p>

                        <p>
                            <label>上传封面</label>
                            <img id="img_fengmian" style="width: 100px; height: 90px"/>
                            <input id="hidden_fengmian" name="fengmian" type="hidden" value=""/>
                            <div id="filePicker1">上传封面</div>
                        </p>
                        <p>
                            <label>上传其他图片</label>
                            <div id="img_other" style="width: 100%; height: 200px; border: black solid 1px"></div>
                            <div id="filePicker2" style="margin-top: 10px">上传其他图片</div>
                        </p>
                        <p>
                            <label>价格</label> <input
                                class="text-input small-input" type="text" id="price"
                                name="price" />
                        </p>
                        <p class="seckillClass">
                            <label style="color: red">*秒杀价格</label>
                            <input class="text-input small-input" type="text" name="seckillPrice">
                        </p>
                        <p>
                            <label>库存</label> <input
                                class="text-input small-input" type="text" id="save"
                                name="save" />
                        </p>
                        <p class="seckillClass">
                            <label style="color: red">*秒杀库存</label>
                            <input type="text" class="text-input small-input" name="seckillSave">
                        </p>
                        <!--<p>
                            <label>商品详情介绍</label>
                            <textarea class="text-input textarea wysiwyg" id="info"
                                      name="info1" cols="79" rows="15"></textarea>
                        </p>-->
                        <!--wangEditor富文本编辑器-->
                        <div id="editor"></div>
                        <textarea  id="text1" name="info" style="width:100%; height:200px;display: none;"></textarea>

                        <p>
                            <input class="mybutton" type="submit" value="Submit" />
                        </p>
                    </fieldset>
                    <div class="clear"></div>
                    <!-- End .clear -->
                </form>
            </div>
            <!-- End #tab2 -->
        </div>
        <!-- End .content-box-content -->
    </div>
</div>

</body>
</html>